<template>
  <div class="login-container">
    <div class="header-container">
      <img src="../../assets/login/job.png" />
    </div>
    <div class="content-container">
      <span class="title1">三级就业服务系统</span>
      <span class="title2">找工作来这里</span>
      <div class="sign-wrapper">
        <div>
          <img src="../../assets/login/user.png" style="width: 26px" />
        </div>
        <div>
          <h3 class="title">用户登录</h3>
        </div>
        <!-- <div>
          <ul class="identity-tab">
            <li
              ka="signup_geek_tab_click"
              :class="role == 1 ? 'active' : ''"
              @click="changeRole(1)"
            >
              我要找工作
            </li>
            <li
              ka="signup_boss_tab_click"
              :class="role == 2 ? 'active' : ''"
              @click="changeRole(2)"
            >
              我要招聘
            </li>
          </ul>
        </div> -->
        <div>
          <el-form
            ref="loginForm"
            :model="loginForm"
            :rules="loginRules"
            class="login-form"
            auto-complete="on"
            label-position="left"
          >
            <el-form-item prop="username" label="账号">
              <el-input
                ref="username"
                v-model="loginForm.username"
                placeholder="Username"
                name="username"
                type="text"
               
                tabindex="1"
                auto-complete="on"
              />
            </el-form-item>

            <el-form-item prop="password" label="密码">
              <el-input
                :key="passwordType"
                ref="password"
                show-password
                v-model="loginForm.password"
                :type="passwordType"
                placeholder="Password"
                name="password"
                tabindex="2"
                auto-complete="on"  
                @keyup.enter.native="handleLogin"
              />
            </el-form-item>
             <el-form-item label="确认密码" prop="checkPass" v-if="type===2">
    <el-input type="password" v-model="loginForm.checkPass" autocomplete="off"></el-input>
  </el-form-item>

            <el-button
              :loading="loading"
              type="primary"
              style="width: 100%; margin-bottom: 30px"
              class="btn"
              @click.native.prevent="handleLogin"
              v-if="type === 2"
              >注册</el-button
            >
            <el-button
              :loading="loading"
              type="primary"
              style="width: 100%; margin-bottom: 30px"
              class="btn"
              @click.native.prevent="handleLogin"
              v-if="type === 1"
              >登录</el-button
            >

           
          </el-form>
          <div class="zc"><span v-if="type === 1" @click="changeType(2)">点击注册新账号</span><span v-if="type ===2" @click="changeType(1)">点击登录</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { validUsername } from "@/utils/validate";

export default {
  name: "Login",
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'role'

    ])
  },
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error("Please enter the correct user name"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("The password can not be less than 6 digits"));
      } else {
        callback();
      }
    };

     const validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.loginForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return {
      role: 1, //1为求职者，2为招聘者 ，默认求职者
      type: 1, // 1为登陆，2为注册，默认登陆

      loginForm: {
        username: "admin",
        password: "111111",
        checkPass:''
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", validator: validateUsername },
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePassword },
        ],
         checkPass: [
          { required: true, trigger: "blur", validator: validatePass2 },
        ],
      },
      loading: false,
      passwordType: "password",
      redirect: undefined,
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  methods: {
    changeRole(role) {
      this.role = role;
    },
    changeType(type) {
      this.type = type;
    },
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("user/login", this.loginForm)
            .then((res) => {
              const map = {
                admin:'/admin/home',
                company:'/company/home',
                worker:'/worker/home'
              }
              //this.$router.push({ path: this.redirect || "/" });
              console.log(map[res],'router---')
              this.$router.push({ path: map[res]});
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #283443;
$light_gray: #fff;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    // color: $cursor;
    color: #303133;
  }
}

/* reset element-ui css */
.login-container {
  width: 100%;
  height: 100%;
  .header-container {
    width: 100%;
    height: 49px;
    background-color: #202329;
    position: relative;
    img {
      position: relative;
      left: 170px;
      width: 48px;
      top: 8px;
    }
  }
  .content-container {
    width: 100%;
    height: calc(100% - 49px);
    background-image: url("../../assets/login/banner.png");
    background-color: #00d7c6;
    background-size: 46%;
    background-repeat: no-repeat;
    position: relative;
    background-position: 8% 33%;
    .title1{
      font-size: 42px;
    font-weight: 600;
    color: #fff;
   position: absolute;
    top: 80px;
    left: 216px;
    letter-spacing: 5px;
    
    }
    .title2{
      font-size: 20px;
      color: #fff;
      position: absolute;
      top: 150px;
      left: 328px;
    }

    .sign-wrapper {
      width: 460px;
      background-color: #fff;
      border-radius: 8px;
      -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
      padding: 18px 24px;
      position: absolute;
      right: 180px;
      top: 13vmin;
      .title {
        color: #00a6a7;
        font-size: 22px;
        font-weight: 500;
        line-height: 30px;
        text-align: center;
      }
      .identity-tab {
        background: #f8f8f8;
        border-radius: 12px;
        margin-top: 20px;
        overflow: hidden;
        padding: 4px;
        width: 100%;
        margin-bottom: 20px;
      }
      .identity-tab li {
        border-radius: 8px;
        color: #444;
        cursor: pointer;
        float: left;
        font-size: 16px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        -webkit-transition: all 0.2slinear;
        transition: all 0.2slinear;
        width: 50%;
      }
      .identity-tab li.active {
        background: #fff;
        color: #00a6a7;
        cursor: default;
        font-weight: 500;
      }
      li,
      ol,
      ul {
        list-style: none;
      }
    }
  }
  .el-input {
    display: inline-block;
    height: 40px;

    input {
      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }

  .el-form-item {
  }
  .btn {
    background: linear-gradient(90deg, #00bebd, #01a7a7);
    height: 42px;
    letter-spacing: 4px;
    font-size: 16px;
    margin-top: 10px;
  }
  .zc{
    text-align: right;
    color:#999;
    font-size: 12px;
    cursor: pointer;
  }
}
</style>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;

  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    // padding: 160px 35px 0;
    margin: 0 auto;
    overflow: hidden;
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .title-container {
    position: relative;

    .title {
      font-size: 26px;
      color: $light_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
</style>
